<!-- 权限配置 -->
<template>
  <div class="permission">
    <div
      class="table-wrap m-t-30"
      v-if="!routeShow"
    >
      <a-row
        class="m-t-36 p-r-10"
        type="flex"
        justify="start"
      >
        <a-col>
          <a-button
            type="primary"
            @click="$router.push({path:'/setting/permission/modify'})"
          >
            新建
          </a-button>
        </a-col>
      </a-row>
      <template>
        <s-table
          ref="sTable"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
        >
          <span
            slot="action"
            slot-scope="text, record"
          >
            <router-link :to="`/setting/permission/modify?id=${record.id}`">修改</router-link>
            <a-divider type="vertical" />
            <a-popconfirm
              placement="top"
              ok-text="确定"
              cancel-text="取消"
              @confirm="deleteRole(record.id)"
            >
              <template slot="title">
                <span>您确定删除该用户权限么？</span>
              </template>
              <a>删除</a>
            </a-popconfirm>

            <a-divider type="vertical" />
            <a-popconfirm
              placement="top"
              ok-text="确定"
              cancel-text="取消"
              @confirm="freeze(record.id)"
            >
              <template slot="title">
                <span>您确定停用该用户权限么？</span>
              </template>
              <a v-if="record.delFlag == 0">停用</a>
            </a-popconfirm>
            <a-popconfirm
              placement="top"
              ok-text="确定"
              cancel-text="取消"
              @confirm="unfreeze(record.id)"
            >
              <template slot="title">
                <span>您确定停用该用户权限么？</span>
              </template>
              <a v-if="record.delFlag == 1">启用</a>
            </a-popconfirm>
          </span>
        </s-table>
      </template>
    </div>
    <router-view v-else></router-view>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
  },
  {
    title: '账号权限',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '添加时间',
    key: 'createTime',
    dataIndex: 'createTime',
  },
  {
    title: '使用状态',
    key: 'delFlag',
    dataIndex: 'delFlag',
    customRender: (text, row, index) => {
      // 状态标识 0正常 1停用
      let value = ''
      if (text === 0) value = '正常'
      if (text === 1) value = '停用'
      return {
        children: value,
        attrs: {},
      };
    },
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];

export default {
  name: 'permission',
  data () {
    return {
      columns,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return this.$axios({
          url: '/role/list',
          method: 'get',
          cancel: {
            _self: this
          },
          params: Object.assign(parameter)
        }).then(res => {
          return {
            data: res.data && res.data.roleList || [],
            totalCount: res.data && res.data.total || 0,
            pageNo: res.data && res.data.curPage || 1
          }
        })
      },
    };
  },
  methods: {
    //删除角色
    deleteRole (id) {
      this.$axios({
        url: '/role',
        method: "delete",
         loadingEl: this.$el,
        cancel: {
          _self: this
        },
        params: {
          id
        }
      }).then(res => {
        this.$refs.sTable.refresh()
      })
    },
    //停用
    freeze (id) {
      this.$axios({
        url: '/role/freeze',
        method: 'put',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        data: {
          id: id
        }
      }).then(res => {
        this.$refs.sTable.refresh()
      })
    },
    //启用
    unfreeze (id) {
      this.$axios({
        url: '/role/unfreeze',
        method: 'put',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        data: {
          id: id
        }
      }).then(res => {
        this.$refs.sTable.refresh()
      })
    },
  },
  computed: {
    routeShow () {
      return this.$route.path === '/setting/permission/modify'
    }
  }
}

</script>
<style scoped lang='less'>
.permission {
  height: 100%;
  overflow: auto;
}
</style>